<template>
	<view class="content">
		<view class="chageDevice" @click="toChageDevice">
			<view class="chageLeft">选择设备</view>
			<view class="chageRight">
				<view class="text">卫生间温控器</view>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
		<view class="contactsName">
			<view class="title">联系人姓名 <text>*</text></view>
			<view class="inputBox">
				<input type="text" v-model="nameValue" />
			</view>
		</view>
		<view class="contactsName">
			<view class="title">联系电话 <text>*</text></view>
			<view class="inputBox">
				<input type="text" v-model="phoneValue" />
			</view>
		</view>
		<view class="contactsName">
			<view class="title">设备地址 <text>*</text></view>
			<view class="inputBox">
				<input type="text" v-model="addressValue" />
			</view>
		</view>
		<view class="contactsName">
			<view class="title">故障描述 <text>*</text></view>
			<view class="textareaBox">
				<textarea type="text" v-model="faultValue" maxlength="-1"></textarea>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const faultValue = ref(''); // 故障描述
	const addressValue = ref(''); // 设备地址
	const phoneValue = ref(''); // 联系电话
	const nameValue = ref(''); // 联系人姓名
	
	// 跳转到设备选择页面
	const toChageDevice = () => {
	  uni.navigateTo({
		url: '/Device/chageDevice/chageDevice'
	  });
	};
	
</script>

<style lang="scss" scoped>
	.chageDevice{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.chageLeft{
			font-size: 32rpx;
			font-weight: bold;
			margin-left: 30rpx;
		}
		.chageRight{
			display: flex;
			align-items: center;
			margin-right: 30rpx;
			.text{
				font-size: 32rpx;
				color: #666;
				
			}
		}
	}
	.contactsName{
		width: 90%;
		margin: 0 auto;
		margin-bottom: 30rpx;
		.title{
			font-size: 32rpx;
			font-weight: bold;
			text{
				color: red;
				margin-left: 16rpx;
			}
		}
		.inputBox{
			width: 100%;
			height: 60rpx;
			border: 1rpx solid #424242;
			margin-top: 20rpx;
			border-radius: 10rpx;
			input{
				width: 96%;
				height: 60rpx;
				margin-left: 2%;
			}
		}
		.textareaBox{
			width: 100%;
			height: 200rpx;
			border: 1rpx solid #424242;
			margin-top: 20rpx;
			border-radius: 10rpx;
			textarea{
				width: 96%;
				height: 160rpx;
				margin: 20rpx 2%;
			}
		}
	}
</style>
